<script setup>
import { h } from 'vue'
import { NTag, NImage } from 'naive-ui'
import moment from 'moment'

const crudConfig = {
  title: '帖子管理',
  apiPrefix: '/forums',
  primaryKey: 'id',
  searchable: true,
  creatable: false,
  editable: false,
  deletable: true,
  switchable: true,  // 启用状态切换
  switchKey: 'status',  // 状态切换的字段

  // 表格列配置
  columns: [
   
    { title: '用户昵称', key: 'nickname' },
    { title: '手机号', key: 'phone' },
    { 
      title: '文件', 
      key: 'files',
      width: 80,
      render: (row) => {
        if (!row.files) return '-'
        return h(NImage, {
          src: row.files,
          width: 50,
          height: 50,
          objectFit: 'cover',
          borderRadius: '4px',
          previewDisabled: false,  // 允许预览
          style: 'cursor: pointer'
        })
      }
    },
    { title: '标题', key: 'title', width: 200 },
    { title: '内容', key: 'content', width: 300 },
    { 
      title: '分类', 
      key: 'category',
      render: (row) => {
        return h(NTag, { type: 'info' }, { default: () => row.category })
      }
    },
    { 
      title: '点赞/收藏/评论', 
      width:150,
      key: 'interactions',
      render: (row) => {
        return `${row.thumb_num}/${row.collect_num}/${row.comment_num || 0}`
      }
    },
    { 
      title: '标签', 
      key: 'tags',
      render: (row) => {
        if (!row.tags) return '-'
        const tagList = row.tags.split(',')
        return h('div', { style: 'display: flex; gap: 4px; flex-wrap: wrap;' }, 
          tagList.map(tag => h(NTag, { size: 'small', type: 'info' }, { default: () => tag }))
        )
      }
    },
    {
      title: '状态',
      key: 'status',
      render: (row) => {
        const statusMap = {
          0: { type: 'error', text: '禁用' },
          1: { type: 'success', text: '启用' }
        }
        const status = statusMap[row.status] || { type: 'default', text: '未知' }
        return h(NTag, { type: status.type }, { default: () => status.text })
      }
    },
    {
      title: '创建时间',
      key: 'created_at',
      render: (row) => moment(row.created_at).format('YYYY-MM-DD HH:mm:ss')
    }
  ],

  // 搜索字段配置
  searchFields: [
    { label: '标题', key: 'title', type: 'input' },
    { label: '内容', key: 'content', type: 'input' },
    { label: '手机号', key: 'phone', type: 'input' },
    { label: '用户昵称', key: 'nickname', type: 'input' },
    {
      label: '分类',
      key: 'category',
      type: 'select',
      options: [
        { label: '分类1', value: '分类1' },
        { label: '分类2', value: '分类2' }
      ]
    },
    {
      label: '状态',
      key: 'status',
      type: 'select',
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 }
      ]
    },
    {
      label: '发布时间',
      key: 'created_at',
      type: 'date'
    }
  ],

  // 表格配置
  tableConfig: {
    rowKey: 'id',
    pagination: true,
    bordered: false,
    size: 'medium',
    striped: true
  }
}
</script>

<template>
  <crud-table :config="crudConfig" />
</template>

<style scoped lang="scss">
.crud-table {
  :deep(.n-tag) {
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
  }
}
</style>
